<template>
  <!-- 导航 -->
  <el-row style="margin: 10px;background-color: ghostwhite;padding: 15px">
    <el-col :span="24">
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>设备管理</el-breadcrumb-item>
        <el-breadcrumb-item>设备类型管理</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>
  </el-row>

  <el-row style="margin: 10px;background-color: ghostwhite;padding: 15px">
    <el-col :span="24">
      <el-form :model="ToolsLedgerQuery" inline>
        <el-form-item label="项目编码">
          <el-input v-model="ToolsLedgerQuery.toolCode" placeholder="请输入工装夹具编码"/>
        </el-form-item>
        <el-form-item label="项目名称">
          <el-input v-model="ToolsLedgerQuery.toolName" placeholder="请输入工装夹具名称"/>
        </el-form-item>
        <el-form-item label="工装夹具类型">
          <el-select v-model="ToolsLedgerQuery.toolTypeId" placeholder="请选择类型" style="width: 150px;">
            <el-option label="全部" value=""></el-option>
            <el-option
              v-for="toolType in ToolTypes"
              :key="toolType.id"
              :label="toolType.typeName"
              :value="toolType.id"></el-option>
        </el-select>
        </el-form-item>
        <el-form-item label="品牌">
          <el-input v-model="ToolsLedgerQuery.brand" placeholder="请输入品牌"/>
        </el-form-item>
        <el-form-item label="型号">
          <el-input v-model="ToolsLedgerQuery.model" placeholder="请输入型号"/>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="ToolsLedgerQuery.status" placeholder="请选择状态" style="width: 150px;">
            <el-option label="全部" value=""></el-option>
            <el-option label="在库" value="1"></el-option>
            <el-option label="被领用" value="2"></el-option>
            <el-option label="报废" value="3"></el-option>
            <el-option label="维修中" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="loadToolLedgers(0)" type="primary">搜索</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
  <el-row style="margin: 0px 10px;background-color: ghostwhite;padding: 0px 10px">
    <el-col :span="24">
      <el-button-group>
        <el-button type="primary" @click="addTask" >新增</el-button>
        <el-button @click="exportToExcel" :style="{ backgroundColor: '#90EE90', borderColor: '#90EE90', color: '#FFF' }">导出</el-button>
      </el-button-group>
    </el-col>
  </el-row>
  <!-- 数据列表 -->
  <el-row style="margin: 0px 10px;padding: 0px 15px">
    <el-col :span="24">
      <el-table :data="toolLedgers" border stripe
                row-key="toolCode"
                ref="taskTable">
        <el-table-column prop="toolCode" label="编号">
          <template v-slot="scope">
            <a href="#" @click.prevent="openDialog(scope.row)">
              {{ scope.row.toolCode }}
            </a>
          </template>
        </el-table-column>
        <el-table-column prop="toolName" label="名称"/>
        <el-table-column prop="brand" label="品牌"/>
        <el-table-column prop="model" label="型号"/>
        <el-table-column prop="typeName" label="类型"/>
        <el-table-column prop="quantity" label="库存数量"/>
        <el-table-column prop="availableQuantity" label="可用数量"/>
        <el-table-column prop="maintenanceType" label="保养维护类型"/>
        <el-table-column prop="nextMaintenanceDate" label="下次保养日期"/>
        <el-table-column prop="status" label="状态">
          <template #default="scope">
            <span>
          <!-- 根据状态值显示不同的文本 -->
          {{ scope.row.status == 1 ? '在库' :
                scope.row.status == 2 ? '被领用' :
                    scope.row.status == 3 ? '报废' :
                        scope.row.status == 4 ? '维修中' :
                            '未知状态' }}
        </span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="330">
          <template #default="scope">
            <el-link  style="margin: 0px 5px" type="primary" @click="openEditDialog(scope.row)"><el-icon><EditPen /></el-icon>编辑</el-link>
            <el-link  style="margin: 0px 5px" type="primary" @click="deleteTask(scope.row)"><el-icon><Delete /></el-icon>删除</el-link>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>



  <el-dialog
      title="新增类型"
      v-model="dialogVisible"
      width="50%"
      @close="resetForm">
    <el-form :model="toolLedgersForm" ref="taskFormRef" label-width="120px">
      <el-form-item label="工装夹具类型">
        <el-select v-model="toolLedgersForm.toolTypeId" placeholder="请选择类型" style="width: 150px;">
          <el-option label="全部" value=""></el-option>
          <el-option
              v-for="toolType in ToolTypes"
              :key="toolType.id"
              :label="toolType.typeName"
              :value="toolType.id"></el-option>
        </el-select>
      </el-form-item>
      <!-- 任务标题 -->
      <el-form-item label="工装夹具编号" prop="toolCode">
        <el-input v-model="toolLedgersForm.toolCode" placeholder="请输入类型编码"/>
        <el-button type="primary" @click="generateDeviceCode">生成编码</el-button>
      </el-form-item>
      <!-- 任务工期 -->
      <el-form-item label="工装夹具名称" prop="toolName">
        <el-input v-model="toolLedgersForm.toolName" placeholder="请输入类型名称" />
      </el-form-item>
      <el-form-item label="品牌" prop="brand">
        <el-input v-model="toolLedgersForm.brand" placeholder="请输入类型名称" />
      </el-form-item>
      <el-form-item label="型号" prop="model">
        <el-input v-model="toolLedgersForm.model" placeholder="请输入类型名称" />
      </el-form-item>
      <el-form-item label="数量" prop="quantity">
        <el-input-number
            v-model="toolLedgersForm.quantity"
            :min="1"
        :max="100"
        :step="1"
        placeholder="请输入数量"
        style="width: 30%;"
        />
      </el-form-item>
      <el-form-item label="可用数量" prop="availableQuantity">
        <el-input v-model="toolLedgersForm.availableQuantity" placeholder="请输入类型名称" />
      </el-form-item>
      <el-form-item label="保养维护类型" prop="maintenanceType">
        <el-select v-model="toolLedgersForm.maintenanceType">
          <el-option value="1" label="定期维护">定期维护</el-option>
          <el-option value="2" label="按使用次数维护">按使用次数维护</el-option>
        </el-select>
      </el-form-item>
        <el-form-item label="下一次保养日期" prop="nextMaintenanceDate">
          <el-date-picker
              v-model="toolLedgersForm.nextMaintenanceDate"
              type="date"
              placeholder="请选择日期"
              format="YYYY-MM-DD"
              :clearable="true" />
        </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select
            v-model="toolLedgersForm.status"
            placeholder="请选择状态"
            disabled>
          <el-option label="在库" value="1" disabled></el-option>
          <el-option label="被领用" value="2" disabled></el-option>
          <el-option label="报废" value="3" disabled></el-option>
          <el-option label="维修中" value="4" disabled></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="备注" prop="notes">
        <el-input v-model="toolLedgersForm.notes" type="textarea" placeholder="标准" />
      </el-form-item>
      <!-- 表单操作按钮 -->
      <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

  <!--编辑任务-->
  <el-dialog
      title="新增类型"
      v-model="EditdialogVisible"
      width="50%"
      @close="resetForm">
    <el-form :model="toolLedgersForm" ref="taskFormRef" label-width="120px">
      <el-form-item label="工装夹具类型">
        <el-select v-model="toolLedgersForm.toolTypeId" placeholder="请选择类型" style="width: 150px;">
          <el-option label="全部" value=""></el-option>
          <el-option
              v-for="toolType in ToolTypes"
              :key="toolType.id"
              :label="toolType.typeName"
              :value="toolType.id"></el-option>
        </el-select>
      </el-form-item>
      <!-- 任务标题 -->
      <el-form-item label="工装夹具编号" prop="toolCode">
        <el-input v-model="toolLedgersForm.toolCode" placeholder="请输入类型编码"/>
        <el-button type="primary" @click="generateDeviceCode">生成编码</el-button>
      </el-form-item>
      <!-- 任务工期 -->
      <el-form-item label="工装夹具名称" prop="toolName">
        <el-input v-model="toolLedgersForm.toolName" placeholder="请输入类型名称" />
      </el-form-item>
      <el-form-item label="品牌" prop="brand">
        <el-input v-model="toolLedgersForm.brand" placeholder="请输入类型名称" />
      </el-form-item>
      <el-form-item label="型号" prop="model">
        <el-input v-model="toolLedgersForm.model" placeholder="请输入类型名称" />
      </el-form-item>
      <el-form-item label="数量" prop="quantity">
        <el-input-number
            v-model="toolLedgersForm.quantity"
            :min="1"
            :max="100"
            :step="1"
            placeholder="请输入数量"
            style="width: 30%;"
        />
      </el-form-item>
      <el-form-item label="可用数量" prop="availableQuantity">
        <el-input v-model="toolLedgersForm.availableQuantity" placeholder="请输入类型名称" />
      </el-form-item>
      <el-form-item label="保养维护类型" prop="maintenanceType">
        <el-select v-model="toolLedgersForm.maintenanceType">
          <el-option value="1" label="定期维护">定期维护</el-option>
          <el-option value="2" label="按使用次数维护">按使用次数维护</el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="下一次保养日期" prop="nextMaintenanceDate">
        <el-date-picker
            v-model="toolLedgersForm.nextMaintenanceDate"
            type="date"
            placeholder="请选择日期"
            format="YYYY-MM-DD"
            :clearable="true" />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select
            v-model="toolLedgersForm.status"
            placeholder="请选择状态"
            disabled>
          <el-option label="在库" value="1" disabled></el-option>
          <el-option label="被领用" value="2" disabled></el-option>
          <el-option label="报废" value="3" disabled></el-option>
          <el-option label="维修中" value="4" disabled></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="备注" prop="notes">
        <el-input v-model="toolLedgersForm.notes" type="textarea" placeholder="标准" />
      </el-form-item>
      <!-- 表单操作按钮 -->
      <el-form-item>
        <el-button type="primary" @click="EditsubmitForm">提交</el-button>
        <el-button @click="EditdialogVisible = false">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

  <!--任务详情-->
  <!--编辑任务-->
  <el-dialog
      title="详情"
      v-model="dialogDetail"
      width="50%"
      @close="resetForm">
    <el-form :model="toolLedgersForm" ref="taskFormRef" label-width="120px">
      <el-form-item label="工装夹具类型">
        <el-select v-model="toolLedgersForm.toolTypeId" placeholder="请选择类型" style="width: 150px;" :disabled="true">
          <el-option label="全部" value=""></el-option>
          <el-option
              v-for="toolType in ToolTypes"
              :key="toolType.id"
              :label="toolType.typeName"
              :value="toolType.id"></el-option>
        </el-select>
      </el-form-item>
      <!-- 任务标题 -->
      <el-form-item label="工装夹具编号" prop="toolCode">
        <el-input v-model="toolLedgersForm.toolCode" placeholder="请输入类型编码" :disabled="true"/>
      </el-form-item>
      <!-- 任务工期 -->
      <el-form-item label="工装夹具名称" prop="toolName">
        <el-input v-model="toolLedgersForm.toolName" placeholder="请输入类型名称" :disabled="true" />
      </el-form-item>
      <el-form-item label="品牌" prop="brand">
        <el-input v-model="toolLedgersForm.brand" placeholder="请输入类型名称" :disabled="true" />
      </el-form-item>
      <el-form-item label="型号" prop="model">
        <el-input v-model="toolLedgersForm.model" placeholder="请输入类型名称" :disabled="true" />
      </el-form-item>
      <el-form-item label="数量" prop="quantity">
        <el-input-number
            v-model="toolLedgersForm.quantity"
            :min="1"
            :max="100"
            :step="1"
            placeholder="请输入数量"
            style="width: 30%;"
            :disabled="true"
        />
      </el-form-item>
      <el-form-item label="可用数量" prop="availableQuantity">
        <el-input v-model="toolLedgersForm.availableQuantity" placeholder="请输入类型名称" :disabled="true" />
      </el-form-item>
      <el-form-item label="保养维护类型" prop="maintenanceType">
        <el-select v-model="toolLedgersForm.maintenanceType" :disabled="true">
          <el-option value="1" label="定期维护">定期维护</el-option>
          <el-option value="2" label="按使用次数维护">按使用次数维护</el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="下一次保养日期" prop="nextMaintenanceDate">
        <el-date-picker
            v-model="toolLedgersForm.nextMaintenanceDate"
            type="date"
            placeholder="请选择日期"
            format="YYYY-MM-DD"
            :clearable="true"
            :disabled="true" />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select
            v-model="toolLedgersForm.status"
            placeholder="请选择状态"
            :disabled="true">
          <el-option label="在库" value="1" disabled></el-option>
          <el-option label="被领用" value="2" disabled></el-option>
          <el-option label="报废" value="3" disabled></el-option>
          <el-option label="维修中" value="4" disabled></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="备注" prop="notes">
        <el-input v-model="toolLedgersForm.notes" type="textarea" placeholder="标准" :disabled="true" />
      </el-form-item>
      <!-- 表单操作按钮 -->
      <el-form-item>
        <el-button @click="dialogDetail = false">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import {ElMessage, ElMessageBox} from "element-plus";
import deviceRequest from "@/api/device.js";
import * as XLSX from 'xlsx';


let ToolTypes = ref([]);
let selectedTask = ref(({}));
let deciveTypeForm =ref({
  deviceTypeCode: '',
  deviceTypeName: '',
  isEnabled: 1, // 默认启用状态
  remarks: '',
  isParent: 0, // 默认不是父节点
  parentCode: '',
});
let emptyQuery = ref({});
let currentCodeIndex = 100;
let toolLedgersForm = ref({});
let ToolsLedgerQuery=ref({});
let EmptytaskQuery=ref({});
let selectedTaskId = ref([]);
let batchSelected = ref({});
let  taskDetailId = ref(-1);
let selectedDevice= ref({});
const resetForm = () => {
  toolLedgersForm.value = {
    deviceTypeCode: '',
    deviceTypeName: '',
    isEnabled: '',
    remarks: '',
    isParent:'',
    parentCode:''
  };
};
const route = useRoute();
const columns = [
  { prop: 'task_id', label: '任务编号' },
  { prop: 'task_title', label: '任务标题' },
  { prop: 'task_desc', label: '任务描述' },
  { prop: 'start_time', label: '开始时间' },
  { prop: 'end_time', label: '结束时间' },
  { prop: 'task_duration', label: '工期' },
  { prop: 'task_progress', label: '进度' },
];
const project = ref({});
const users = ref({});
const toolLedgers = ref([]);
const curUserId = ref(-1);
const dialogVisible = ref(false);
const EditdialogVisible = ref(false);
const dialogDetail=ref(false);
const dialogVisibleDetail = ref(false);
const editTask = ref({});
const defaultProps = {
  children: 'children',
  label: 'task_title',
};

const isBatchEdit = ref(false);
const openEditDialog = (row) => {
  toolLedgersForm.value=row;
  console.log(toolLedgersForm.value);
  EditdialogVisible.value = true;

};
const openDialog = (row) =>{
  toolLedgersForm.value=row;
  dialogDetail.value = true;
}
const handleDialogClose = () => {
  // 在这里可以处理关闭弹窗时的逻辑
};
const deleteTask = (row) =>{


  console.log(row.deviceCode);
  ElMessageBox.confirm(
      '您确定要将任务删除吗？',
      '提示',
      {
        confirmButtonText: '是的',
        cancelButtonText: '点错了',
        type: 'warning',
      }
  ).then(()=>{

    if(!row.parent){
      deviceRequest.deleteDeviceledger(row.deviceCode,res=>{
        loadToolLedgers(0);
        window.location.reload();
      })
    }else {
      ElMessage({
        type:"warning",
        message:"您选中的项目包含子项目，请先删除子项目"
      });
      return;
    }
  })
};
const submitEditForm = () => {

};
onMounted(() => {
  loadToolLedgers(0);
  loadToolTypes();
});

function loadToolTypes(){
    deviceRequest.loadToolTypes(emptyQuery.value,1,10,res=>{
      ToolTypes.value = res.data;
      console.log(ToolTypes.value);
    })
}
function exportToExcel() {
  // 转换数据格式为 Excel 所需的格式
  const worksheet = XLSX.utils.json_to_sheet(toolLedgers.value);
  const workbook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(workbook, worksheet, '工装夹具台账信息');
  // 导出 Excel 文件
  XLSX.writeFile(workbook, '工装夹具台账信息.xlsx');
}
function viewDeviceInfo(device){
  selectedDevice.value = device;
  console.log(selectedDevice.value);
  dialogVisibleDetail.value = true;
}
function EditsubmitForm(){
    console.log(toolLedgersForm.value);
    deviceRequest.edittoolsLedgerForm(toolLedgersForm.value,res=>{
      loadToolLedgers(0);
      EditdialogVisible.value=false;
    });
}

function generateDeviceCode(){
  toolLedgersForm.value.toolCode = `T${currentCodeIndex}`;
  currentCodeIndex++; // 增加索引以便下次生成下一个编码
}
function submitForm(){
  toolLedgersForm.value.status=1;
  console.log(toolLedgersForm.value);
  deviceRequest.addtoolsLedgerForm(toolLedgersForm.value,res=>{
    loadToolLedgers(0);
    resetForm();
    dialogVisible.value = false;
  });
}
function handleSelectionChange(val){
}
function addSonTask(select){
  selectedTask.value=select;
  console.log("选中的数据",selectedTask.value);
  dialogVisible.value= true;
}
function loadUser(UserId){

}
function loadProject(projectId) {

}
function  addTask(){
  dialogVisible.value = true;
  console.log(dialogVisible.value);
}
function batchDeleteTask() {
}
function batchEditTask(){
  isBatchEdit.value=true;
  editTask.value={};
  EditdialogVisible.value = true;

}
function loadToolLedgers(parentId) {

  deviceRequest.loadtoolsLedgerForm(ToolsLedgerQuery.value,1,10,res=>{
    toolLedgers.value=res.data;
    console.log(toolLedgers);
  })
}
function loadChildrenTask(deviceType,node,resole){
  console.log(deviceType.deviceTypeCode);
  console.log(node);
  deviceRequest.loadtoolLedgers(ToolsLedgerQuery.value,deviceType.deviceTypeCode,1,10,res=>{
    resole(res.data);
  })

}
function showDetail(task) {

}
</script>
